<template>
  <div class="mainWrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-diaodu fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>报表查询</el-breadcrumb-item>
      <el-breadcrumb-item>灵活经营报表(商家)</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索项封装 -->
    <sheet-header
      @search="search"
      @export="exportReport"
      @init="initReport"
      @switch-type="switchType"
      :hasArea="true"
      :type="type"
      :tabs='tabs'
      ref="header"
    ></sheet-header>

    <!-- 表格数据 月-->
    <table-list
      v-show="type === 'month'"
      type="month"
      :total="monthTotal"
      :page="monthPage"
      :page-size="monthPageSize"
      :list="monthList"
      :aggregate="monthAggregate"
      @page-num="pageHandler"
      @page-size="sizeHandler"
    ></table-list>

    <!-- 表格数据 周-->
    <table-list
      v-show="type === 'week'"
      type="week"
      :total="weekTotal"
      :page="weekPage"
      :page-size="weekPageSize"
      :list="weekList"
      :aggregate="weekAggregate"
      @page-num="pageHandler"
      @page-size="sizeHandler"
    ></table-list>

    <!-- 表格数据 日-->
    <table-list
      v-show="type === 'day'"
      type="day"
      :total="dayTotal"
      :page="dayPage"
      :page-size="dayPageSize"
      :list="dayList"
      :aggregate="dayAggregate"
      @page-num="pageHandler"
      @page-size="sizeHandler"
    ></table-list>
  </div>
</template>
<script>
import SheetHeader from "./SheetHeader";
import TableList from "./component/AgileBusinessAreaTable";
import { fetchAreaList, fetchAreaAggregate } from "@/api/sheet.js";
import qs from "qs";
const common = require("../../../static/tool.js");
const PAGE_SIZE = 20;
export default {
  name: "AgileBusinessAreaReport",
  components: { TableList, SheetHeader },
  data() {
    return {
      url: common.url,
      type: "month",
      types: ["month", "week", "day"],
      monthList: [],
      monthTotal: 0,
      monthPage: 1,
      monthPageSize: 20,
      monthAggregate: {},
      weekList: [],
      weekTotal: 0,
      weekPage: 1,
      weekPageSize: 20,
      weekAggregate: {},
      dayList: [],
      dayTotal: 0,
      dayPage: 1,
      dayPageSize: 20,
      dayAggregate: {},
      tabs: [
        {key: 'month', text: '月', active: true},
        {key: 'week', text: '周', active: false},
        {key: 'day', text: '日', active: false}
      ]
    };
  },
  created() {},
  methods: {
    // tab切换
    switchType(type) {
      this.type = type;
    },

    // 重置
    reset({ type }) {
      this[`${type}Page`] = 1;
      this[`${type}PageSize`] = PAGE_SIZE;
    },

    // 翻页
    pageHandler({ page, type }) {
      const query = this.$refs.header.getCurrentQuery();
      this[`${type}Page`] = page;
      this.fetchReportData(query);
    },

    // 切换页码
    sizeHandler({ size, type }) {
      const query = this.$refs.header.getCurrentQuery();
      this[`${type}Page`] = 1;
      this[`${type}PageSize`] = size;
      this.fetchReportData(query);
    },

    // 初始化进入页面发起请求
    initReport(query) {
      this.fetchReportData(query);
    },

    // 条件变化触发(搜索 + 总计)
    async search(query) {
      this[`${this.type}Page`] = 1;
      this[`${this.type}PageSize`] = PAGE_SIZE;
      this.fetchReportData(query);
    },

    async fetchReportData(query = {}) {
      try {
        const { type } = query;
        // 总计
        if (this[`${type}Page`] === 1) {
          const { aggregate } = await fetchAreaAggregate(query);
          this[`${type}Aggregate`] = aggregate || {};
        }

        // 列表
        const { list, total } = await fetchAreaList({
          ...query,
          page: this[`${type}Page`],
          page_size: this[`${type}PageSize`],
        });

        this[`${type}List`] = list || [];
        this[`${type}Total`] = total || 0;
      } catch (err) {
        console.log("---err", err);
      }
    },

    //导出
    exportReport() {
      const params = qs.stringify({
        token: JSON.parse(sessionStorage.getItem("manageInfo")).token,
        ...this.$refs.header.getCurrentQuery(),
      });

      window.location.href =
        this.url + "/statistics/management/exportAreaList?" + params;
    },
  },
};
</script>
<style scoped lang="scss">
</style>




// WEBPACK FOOTER //
// src/components/sheet/AgileBusinessAreaReport.vue